<!-- 报警配置 -->

<template>
  <div class="flex flex-col w-full p-10px box-border" style="height: calc(100% - 40px)">
    <!-- card -->
    <div
      class="flex-1 flex flex-col h-100%"
      style="box-shadow: 0px 1px 10px 0px rgba(153, 153, 153, 0.4)"
    >
      <div class="h-50px lh-50px pl-10px pr-40px bg-[#F8F8F8]">
        <span class="text-[#333] text-16px font-bold">报警配置列表</span>
      </div>
      <div class="w-full" style="height: calc(100% - 50px)">
        <!--查询表单 -->
        <el-form
          :inline="true"
          :model="formInline"
          class="m-20px pl-30px border-0 border-b border-solid border-#E0E0E0"
        >
          <el-form-item label="告警类型">
            <el-select v-model="formInline.gjlx" placeholder="请选择告警类型">
              <el-option
                v-for="(item, index) in gjlxList"
                :key="index"
                :label="item.mc"
                :value="item.dm"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="告警代码">
            <el-input v-model="formInline.gjdm" placeholder="请选择告警代码"></el-input>
          </el-form-item>
          <el-form-item label="告警等级">
            <el-select v-model="formInline.gjdj" placeholder="请选择告警等级">
              <el-option
                v-for="(item, index) in gjdjList"
                :key="index"
                :label="item.mc"
                :value="item.dm"
              />
            </el-select>
          </el-form-item>

          <div class="mt-2px float-right">
            <el-button
              type="primary"
              class="w-80px rounded-15px"
              :icon="Search"
              @click="getPageList"
              >查询</el-button
            >
            <el-button class="w-80px bg-[#dceeff] rounded-15px" :icon="Refresh" @click="reset"
              >重置</el-button
            >
          </div>
        </el-form>
        <div class="text-right pr-20px pb-10px">
          <el-button type="primary" class="w-80px rounded-15px" :icon="Plus" @click="add"
            >新增</el-button
          >
          <el-button
            type="primary"
            class="w-80px rounded-15px"
            :icon="Download"
            @click="exportExcel"
            >导出</el-button
          >
        </div>
        <!--表格 -->
        <Table
          class="mt-20px"
          style="height: calc(100% - 200px)"
          :table-columns="tableColumns"
          :table-data="tableData"
        >
          <template #actionColumn="{ row }">
            <div class="flex justify-center">
              <el-button link type="primary" @click="query(row)">查看</el-button>
              <el-button link type="primary" @click="edit">编辑</el-button>
              <el-button link type="danger" @click="deleteData">删除</el-button>
            </div>
          </template>
        </Table>

        <el-pagination
          class="justify-end m-10px mt-15px"
          layout="total, sizes, prev, pager, next"
          :total="tableTotal"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>

  <Dialog :visible="dialogShow" title="报警配置详情查看" width="1000px" @close="dialogShow = false">
    <el-form
      v-for="(formItem, formIndex) in bjpzFormList"
      :key="formIndex"
      :label-width="formItem.formLabelWidth"
    >
      <el-row :gutter="0">
        <el-col v-for="(item, index) in formItem.formList" :key="index" :span="item.span || 12">
          <el-form-item
            v-if="item.key != 'gjlx' && item.key != 'gjdj' && item.key != 'jclx'"
            :label="item.label"
          >
            <el-input v-model="item.value" :type="item.type" :disabled="inputDisabled"></el-input>
          </el-form-item>

          <el-form-item v-if="item.key == 'gjlx'" label="告警类型">
            <el-select v-model="item.value" placeholder="请选择告警类型" :disabled="inputDisabled">
              <el-option
                v-for="(item, index) in gjlxList"
                :key="index"
                :label="item.mc"
                :value="item.dm"
              />
            </el-select>
          </el-form-item>

          <el-form-item v-if="item.key == 'jclx'" label="监测类型">
            <el-select v-model="item.value" placeholder="请选择监测类型" :disabled="inputDisabled">
              <el-option
                v-for="(item, index) in jclxList"
                :key="index"
                :label="item.mc"
                :value="item.dm"
              />
            </el-select>
          </el-form-item>

          <el-form-item v-if="item.key == 'gjdj'" label="告警等级">
            <el-select v-model="item.value" placeholder="请选择告警等级" :disabled="inputDisabled">
              <el-option
                v-for="(item, index) in gjdjList"
                :key="index"
                :label="item.mc"
                :value="item.dm"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </Dialog>
  <!-- 新增弹窗 -->
  <Dialog :visible="dialogAddShow" title="报警配置详情新增" width="1000px" @close="close">
    <el-form
      v-for="(formItem, formIndex) in bjpzFormList"
      :key="formIndex"
      :label-width="formItem.formLabelWidth"
      :model="addForm"
      :rules="rules"
    >
      <el-row :gutter="0">
        <el-col v-for="(item, index) in formItem.formList" :key="index" :span="item.span || 12">
          <el-form-item
            v-if="item.key != 'gjlx' && item.key != 'gjdj' && item.key != 'jclx'"
            :label="item.label" :prop="item.key" 
          >
            <el-input v-model="addForm[item.key]" :name="item.key" :type="item.type"></el-input>
          </el-form-item>

          <el-form-item v-if="item.key == 'gjlx'" label="告警类型" :prop="item.key" >
            <el-select
              v-model="addForm[item.key]"
              :name="item.key"
              placeholder="请选择告警类型"
              @change="gjlxChange(addForm[item.key])"
            >
              <el-option
                v-for="(item, index) in gjlxList"
                :key="index"
                :label="item.mc"
                :value="item.dm"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-if="item.key == 'jclx'" label="监测类型" :prop="item.key">
            <el-select v-model="addForm[item.key]" :name="item.key" placeholder="请选择监测类型">
              <el-option
                v-for="(item, index) in jclxList"
                :key="index"
                :label="item.mc"
                :value="item.dm"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-if="item.key == 'gjdj'" label="告警等级" :prop="item.key">
            <el-select v-model="addForm[item.key]" :name="item.key" placeholder="请选择告警等级">
              <el-option
                v-for="(item, index) in gjdjList"
                :key="index"
                :label="item.mc"
                :value="item.dm"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="text-right">
      <el-button class="w-80px h-40px" @click="close">取消</el-button>
      <el-button type="primary" class="w-80px h-40px" @click="addSave">保存</el-button>
    </div>
  </Dialog>
</template>
<script lang="ts" setup>
import { ElMessageBox, ElMessage } from 'element-plus'
import type { FormRules } from 'element-plus'
import { Search, Refresh, Plus, Download } from '@element-plus/icons-vue'
import * as XLSX from 'xlsx'

const formInline = reactive({
  gjdj: '',
  gjdm: '',
  gjlx: '',
})

const addForm = ref({})

// 定义列配置
const tableColumns = [
  {
    type: 'index',
    index: 1,
    label: '序号',
    width: '80',
  },
  {
    prop: 'gjlxMc',
    label: '告警类型',
  },
  {
    prop: 'gjdm',
    label: '告警代码',
    width: 200,
  },
  {
    prop: 'gjdjMc',
    label: '告警等级',
  },
  {
    prop: 'xthw',
    label: '系统号位',
  },
  {
    prop: 'dwbh',
    label: '点位编号',
  },
  {
    prop: 'gjmc',
    label: '点位名称',
    width: '200',
  },
  {
    prop: 'gjxxmb',
    label: '告警消息模版',
    width: '200',
  },
  {
    prop: 'gxr',
    label: '更新人',
    width: '120',
  },
  {
    prop: 'perlxdh',
    label: '联系电话',
  },
  {
    prop: 'gxsj',
    label: '更新时间',
    width: '200',
  },
  {
    prop: 'actions',
    label: '操作',
    width: '140',
    slotName: 'actionColumn',
    type: 'slot',
    align: 'center',
  },
]

const tableData = ref([])

//报警配置弹窗信息
const dialogShow = ref(false)
//新增弹窗
const dialogAddShow = ref(false)

const bjpzFormList = [
  {
    formLabelWidth: '160px',
    formList: [
      {
        label: '告警类型',
        key: 'gjlx',
        type: 'input',
        value: '',
      },
      {
        label: '监测类型',
        key: 'jclx',
        type: 'input',
        value: '',
      },
      {
        label: '告警等级',
        key: 'gjdj',
        type: 'input',
        value: '',
      },
      {
        label: '配置人',
        key: 'perxm',
        type: 'input',
        value: '',
      },
      {
        label: '联系电话',
        key: 'perlxdh',
        type: 'input',
        value: '',
      },
      {
        label: '阈值上限',
        key: 'yzsxz',
        type: 'input',
        value: '',
      },
      {
        label: '阈值下限',
        key: 'yzxxz',
        type: 'input',
        value: '',
      },
      {
        label: '单位',
        key: 'dw',
        type: 'input',
        value: ' ℃',
      },
      {
        label: '告警代码',
        key: 'gjdm',
        type: 'input',
        value: '',
      },
      {
        label: '系统位号',
        key: 'xtwh',
        type: 'input',
        value: '',
      },
      {
        label: '监测项目',
        key: 'jcxm',
        type: 'input',
        value: '',
      },
      {
        label: '点位编号',
        key: 'dwbh',
        type: 'input',
        value: '',
      },
      {
        label: '点位名称',
        key: 'gjmc',
        type: 'input',
        value: '',
      },
      {
        label: '所属企业部门',
        key: 'ssqybm',
        type: 'input',
        value: '',
      },
      {
        label: '告警消息模板',
        key: 'gjxxmb',
        type: 'input',
        value: '',
      },
      {
        label: '审核人',
        key: 'shr',
        type: 'input',
        value: '',
      },
      {
        label: '运用算法',
        key: 'yysf',
        type: 'input',
        value: '',
      },
      {
        label: '配置说明',
        key: 'pzsm',
        type: 'textarea',
        span: 24,
        value: '',
      },
    ],
  },
]

//保存校验
const rules = reactive<FormRules>({
  gjlx: [
    { required: true, message: "告警类型不能为空", trigger: "blur" }
  ],
  jclx: [
    { required: true, message: "监测类型不能为空", trigger: "blur" }
  ],
  gjdj: [
    { required: true, message: "告警等级不能为空", trigger: "blur" }
  ],
  perxm: [
    { required: true, message: "配置人不能为空", trigger: "blur" }
  ],
  yzsxz: [
    { required: true, message: "阈值上限不能为空", trigger: "blur" }
  ],
  yzxxz: [
    { required: true, message: "阈值下限不能为空", trigger: "blur" }
  ],
  dwbh: [
    { required: true, message: "点位编号", trigger: "blur" }
  ],
  gjmc: [
    { required: true, message: "点位名称", trigger: "blur" }
  ],
  
})

const inputDisabled = ref(true)

//查看
const query = (row: any) => {
  bjpzFormList[0].formList.forEach((e) => {
    if (e.key != '') {
      e.value = row[e.key]
    }
  })
  inputDisabled.value = true
  dialogShow.value = true
}

const close = () => {
  //弹出框清空
  bjpzFormList[0].formList.forEach((e: any) => {
    e.value = ''
  })
  addForm.value = {}
  dialogAddShow.value = false
}

const add = () => {
  //弹出框清空
  bjpzFormList[0].formList.forEach((e) => {
    e.value = ''
  })
  addForm.value = {}
  dialogAddShow.value = true
}
const addSave = () => {
  const data: any = addForm.value
  //校验
  if(data.gjlx==undefined||data.gjlx===""){
    ElMessage({message: "新增失败！告警类型不能为空" ,type: 'warning'})
    return
  }
  if(data.jclx==undefined||data.jclx===""){
    ElMessage({message: "新增失败！监测类型不能为空" ,type: 'warning'})
    return
  }
  if(data.gjdj==undefined||data.gjdj===""){
    ElMessage({message: "新增失败！告警等级不能为空" ,type: 'warning'})
    return
  }
  if(data.perxm==undefined||data.perxm===""){
    ElMessage({message: "新增失败！配置人不能为空" ,type: 'warning'})
    return
  }
  if(data.yzsxz==undefined||data.yzsxz===""){
    ElMessage({message: "新增失败！阈值上限不能为空" ,type: 'warning'})
    return
  }
  if(data.yzxxz==undefined||data.yzxxz===""){
    ElMessage({message: "新增失败！阈值下限不能为空" ,type: 'warning'})
    return
  }
  if(data.dwbh==undefined||data.dwbh===""){
    ElMessage({message: "新增失败！点位编号不能为空" ,type: 'warning'})
    return
  }
  if(data.gjmc==undefined||data.gjmc===""){
    ElMessage({message: "新增失败！点位名称不能为空" ,type: 'warning'})
    return
  }

  insertOrUpdate(data)
    .then((res: any) => {
      if (res != null) {
        dialogAddShow.value = false
        getPageList()
        ElMessage({ message: '新增成功！', type: 'success' })
      }
    })
    .catch((error) => {
      ElMessage({
        message: '新增失败! ' + error?.response?.data?.result?.resultMessage,
        type: 'error',
      })
    })
}

//导出
const exportExcel = async () => {
  let fdArrayList: any = []
  const data = {
    ...formInline,
    pageNo: 1,
    pageSize: 5000,
  }
  await queryPageBjgzpz(data).then((res: any) => {
    fdArrayList = res.records
  })
  const fdArray: any = []
  fdArrayList.forEach(function (data: any, index: any) {
    const obj = {
      序号: index + 1,
      告警类型: data.gjlx,
      告警代码: data.gjdm,
      告警等级: data.gjdj,
      系统号位: data.xthw,
      点位编号: data.dwbh,
      点位名称: data.dwmc,
      告警消息模版: data.gjxxmb,
      更新人: data.gxr,
      联系电话: data.perlxdh,
      更新时间: data.gxsj,
    }
    fdArray.push(obj)
  })
  // 新建一个excel.xlsx
  const wb = XLSX.utils.book_new()
  // //封装JSON 数据
  const fdXslxws = XLSX.utils.json_to_sheet(fdArray)
  XLSX.utils.book_append_sheet(wb, fdXslxws, 'sheet')
  XLSX.writeFile(wb, '报警配置' + '.xlsx')
  ElMessage({ message: '导出成功！', type: 'success' })
}

//分页查询
const pageNo = ref(1)
const pageSize = ref(10)
const tableTotal = ref(0)
const getPageList = () => {
  const data = {
    ...formInline,
    pageNo: pageNo.value,
    pageSize: pageSize.value,
  }
  queryPageBjgzpz(data).then((res: any) => {
    tableData.value = res.records
    pageNo.value = res.current
    pageSize.value = res.size
    tableTotal.value = res.total
  })
}
//重置
const reset = () => {
  pageNo.value = 1
  pageSize.value = 10
  formInline.gjdj = ''
  formInline.gjdm = ''
  formInline.gjlx = ''
}
//分页按钮
const handleSizeChange = (val: number) => {
  console.log(`每页 ${val} 条`)
  pageSize.value = val
  getPageList()
}
const handleCurrentChange = (val: number) => {
  console.log(`当前页: ${val}`)
  pageNo.value = val
  getPageList()
}

const edit = () => {
  ElMessageBox.confirm('暂无权限操作!', '提示', {
    confirmButtonText: '确认',
    type: 'warning',
    showCancelButton: false,
  }).then(() => {})

  // inputDisabled.value = false
  // dialogShow.value = true
}

const deleteData = () => {
  ElMessageBox.confirm('暂无权限操作!', '提示', {
    confirmButtonText: '确认',
    type: 'warning',
    showCancelButton: false,
  }).then(() => {})
}

//加载告警等级
const gjdjList = ref([])
const getGjdj = () => {
  queryZdInfo({ zdxdm: 'gjdj' }).then((res: any) => {
    gjdjList.value = res
  })
}
//加载告警类型
const gjlxList = ref([])
const getGjlx = () => {
  queryZdInfo({ zdxdm: 'gjlx' }).then((res: any) => {
    gjlxList.value = res
  })
}

//加载 监测类型
const jclxList = ref([])
const topNav = reactive([
  { text: '电力监测', dm: '2', xzcs: 'dljc' },
  { text: '蒸汽监测', dm: '3', xzcs: 'zqjc' },
  { text: '水务监测', dm: '1', xzcs: 'swjc' },
  { text: '燃气监测', dm: '4', xzcs: 'rqjc' },
  { text: '用煤监测', dm: '5', xzcs: 'ymjc' },
])
//告警类型联动
const gjlxChange = (e: any) => {
  queryZdInfo({ zdxdm: topNav[e].xzcs }).then((res: any) => {
    addForm.jclx = ''
    jclxList.value = []
    jclxList.value = res
  })
}

//初始化
onMounted(() => {
  getPageList()
  getGjlx()
  getGjdj()
})
</script>

<style></style>
